<template>
  <div class="fixed-zbest ranking">
    <header class="header">
      <div class="left">
        <van-icon @click.stop="$router.go(-1)" class="icon" name="arrow-left" />
      </div>
      <div class="right">
        <div
          :class="{ active: active == index }"
          v-for="(nav, index) in navList"
          :key="index"
          @click.stop="changeNav(nav, index)"
        >
          {{ nav.name }}
        </div>
      </div>
    </header>
    <div class="content" v-if="sidebarList">
      <nav class="sidebar">
        <div
          class="sidebar-item"
          :class="{ active: sideIndex == index }"
          v-for="(sidebar, index) in sidebarList"
          :key="index"
          @click.stop="changeNowSidebar(sidebar, index)"
        >
          {{ sidebar.name }}
        </div>
      </nav>
      <div class="list" @scroll.stop="scrollEvent">
        <div ref="content">
          <div
            @click.stop="toDetail(item)"
            class="list-item"
            v-for="(item, index) in showList"
            :key="index"
          >
            <div
              class="img-box"
              :style="{ backgroundImage: `url(${item.cover})` }"
            ></div>
            <div class="right">
              <div class="my-text title">{{ item.title }}</div>
              <div class="my-text des">{{ item.recomContent }}</div>
              <div class="author">
                <span class="name">{{ item.author }}</span
                ><span class="category"
                  >&nbsp; | &nbsp;{{ item.category }}</span
                >
              </div>
              <div class="index">
                <span>{{ index + 1 }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data: () => {
    return {
      navList: null,
      active: 0,
      nowNav: null,
      nowSidebar: null,
      sideIndex: 0,
      showList: null,
      nextUrl: null,
      userTime: 0,
    };
  },
  computed: {
    sidebarList() {
      return this.nowNav?.subNavis;
    },
  },
  watch: {
    sidebarList(list) {
      this.nowSidebar = list[0];
    },
    nowSidebar(nav) {
      console.log(nav);
      this.getListData();
    },
  },
  methods: {
    //跳转详情
    toDetail(item) {
      console.log(item);
      this.$router.push({
        name: "detail",
        params: {
          bookid: item.id,
          title: item.title,
        },
      });
    },
    //滚动加载更多
    scrollEvent(e) {
      clearTimeout(this.userTime);
      this.userTime = setTimeout(() => {
        let content = getComputedStyle(this.$refs.content);
        console.log(e.target.scrollTop, Number.parseInt(content.height));
        if (
          Number.parseInt(content.height) -
            e.target.clientHeight -
            e.target.scrollTop <
          100
        ) {
          this.getMoreData();
        }
      }, 1000);
    },
    //获取更多数据
    getMoreData() {
      if (!this.nextUrl) {
        this.$toast("没有更多了");
        return;
      }
      this.axios({
        method: "get",
        url: `${this.api.baseUrlV2}${this.nextUrl}`,
      }).then((res) => {
        this.showList = [...this.showList, ...res.data.list];
        if(!res.data?.more?.url){
          this.nextUrl = null;
          return;
        }
        this.nextUrl = res.data?.more?.url;
      });
    },
    //获取初始数据
    getListData() {
      if(!this.nowSidebar?.naviInfos[0]?.url){
        this.$toast("该项暂无数据");
        return;
      }
      this.axios({
        method: "get",
        url: `${this.api.baseUrlV2}${this.nowSidebar?.naviInfos[0]?.url}`,
      }).then((res) => {
        this.showList = res.data.list;
        if(!res.data?.more?.url){
          this.$toast("暂无数据");
          this.nextUrl = null;
          return;
        }
        this.nextUrl = res.data.more.url;
      });
    },
    //侧边栏变换
    changeNowSidebar(sidebar, index) {
      this.nowSidebar = sidebar;
      this.sideIndex = index;
    },
    //头部标签变换
    changeNav(nav, index) {
      this.nowNav = nav;
      this.active = index;
      this.sideIndex = 0;
    },
    //获取导航数据
    getNavDetail() {
      this.axios({
        method: "get",
        url: `${this.api.baseUrlV2}${this.$route.params.url}`,
      }).then((res) => {
        this.navList = res.data.data.list;
        this.nowNav = this.navList[0];
      });
    },
  },
  created() {
    this.getNavDetail();
  },
};
</script>

<style lang="scss" scoped>
.ranking {
  .header {
    width: 100%;
    height: 0.5rem;
    box-sizing: border-box;
    padding: 0 0.15rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .left {
      width: 0.84rem;
      min-width: 0.84rem;
    }
    .icon {
      font-size: 0.25rem;
    }
    .right {
      flex-grow: 1;
      display: flex;
      align-items: center;
      > div {
        position: relative;
        flex: 1;
        margin-left: 0.1rem;
        height: 100%;
        text-align: center;
        line-height: 0.5rem;
        &::after {
          content: "";
          position: absolute;
          width: 30%;
          height: 0.02rem;
          border-radius: 0.01rem;
          background-color: transparent;
          left: 0;
          right: 0;
          bottom: 0.06rem;
          margin: 0 auto;
        }
      }
      .active {
        &::after {
          background-color: var(--bgc-red);
        }
      }
    }
  }
  .content {
    width: 100%;
    height: calc(100vh - 0.5rem);
    box-sizing: border-box;
    border-top: 0.01rem solid var(--border-gray);
    display: flex;
    .sidebar {
      width: 0.84rem;
      min-width: 0.84rem;
      height: 100%;
      box-sizing: border-box;
      border-right: 0.01rem solid var(--border-gray);
      > div {
        &:first-child {
          padding-top: 0.46rem;
        }
      }
      .sidebar-item {
        width: 100%;
        font-size: 0.15rem;
        text-align: center;
        line-height: 0.14rem;
        padding-bottom: 0.46rem;
      }
      .active {
        color: var(--text-red);
      }
    }
    .list {
      flex-grow: 1;
      height: 100%;
      overflow: scroll;
      box-sizing: border-box;
      padding: 0.1rem;
      &::-webkit-scrollbar {
        display: none;
      }
      .list-item {
        width: 100%;
        height: 0.68rem;
        display: flex;
        margin-bottom: 0.2rem;
        .img-box {
          width: 0.49rem;
          min-width: 0.49rem;
          aspect-ratio: 49/68;
        }
        .right {
          position: relative;
          flex-grow: 1;
          margin-left: 0.1rem;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          .title {
            font-size: 0.16rem;
          }
          .des {
            font-size: 0.13rem;
            color: var(--text-gray);
          }
          .author {
            font-size: 0.13rem;
            color: var(--text-gray);
          }
          .index {
            position: absolute;
            right: 0;
            top: 0;
            font-size: 0.14rem;
            color: var(--text-gray);
          }
        }
      }
    }
  }
}
</style>